<template>
  <j-modal
    :title="title"
    :width="980"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">


    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="5" pull="2">
            <a-form-item
              style="margin-left: 80px"
              label="收货人">
            </a-form-item>
          </a-col>
          <a-col :span="10" pull="2">
            <a-form-item >
              <a-input style="width: 60%" placeholder="请输入收货人名称"  v-decorator="['name',validatorRules.name]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="5" pull="2">
            <a-form-item
              style="margin-left: 80px"
              label="收货人电话">
            </a-form-item>
          </a-col>
          <a-col :span="10" pull="2">
            <a-form-item >
            <a-input style="width: 60%" placeholder="请输入收货人电话" v-decorator="['phoneNumber', validatorRules.phone]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="5" pull="2">
            <a-form-item

              style="margin-left: 80px"
              label="收货人所在地">

            </a-form-item>
          </a-col>
          <a-col :span="10" pull="2">
            <a-form-item >
            <a-cascader style="width: 123%" :options="areaData" :value="areaValue" @change="onChange"
                        placeholder="请输入收货人所在地" v-decorator="['address', validatorRules.address]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="5" pull="2">
            <a-form-item
              style="margin-left: 80px"
              label="详细地址">
            </a-form-item>
          </a-col>
          <a-col :span="10" pull="2">
            <a-form-item>
              <a-input style="width: 123%" placeholder="请输入详细地址" v-decorator="['detailAddress', validatorRules.detailAddress]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="5" pull="2">
            <a-form-item
              style="margin-left: 80px"
              label="距离">
            </a-form-item>
          </a-col>
          <a-col :span="10" pull="2">
            <a-form-item >
              <a-input style="width: 60%" placeholder="请输入距离" v-decorator="['distance', validatorRules.distance]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

  </j-modal>

</template>

<script>
import {getAction, httpAction, postAction} from "@api/manage";
import JDictSelectTag from "@comp/dict/JDictSelectTag";
import pick from "lodash.pick";
import moment from "moment";
import areaDataJson from "@/utils/area_mini.json";

export default {
  name: "StmSaveAddress",
  components: { JDictSelectTag },
  data () {
    return {
      visible: false,
      confirmLoading: false,
      model: {},
      form: this.$form.createForm(this),
      areaData: areaDataJson,
      storeId:'',
      areaValue: [],
      title:'',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      url: {
        add: '/ums/UmsMemberReceiveAddress/add',
        areaJson: '/data/area',
        fileUpload: window._CONFIG['domianURL']+"/sys/common/ossUpload",
        imgerver: window._CONFIG['domianURL']+"/sys/common/view",
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      validatorRules: {
        name: { rules: [{ required: true, message: '请输入收货人名称!' }] },
        phone: { rules: [{ required: true, message: '请输入收货人电话!' }] },
        detailAddress: { rules: [{ required: true, message: '请输入详细地址!' }] },
        address: { rules: [{ required: true, message: '请输入收货人所在地!' }] },
        distance: {rules: [{required: true, message: '请输入距离!'}]},
      },
      goodsData:[]
    }
  },
  methods: {
    show(record) {
      this.storeId=record.storeId;
      console.log(22);
      this.form.resetFields();
      this.visible = true;
    },
    close(){
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values);
          formData.memberId=this.storeId;
          formData.defaultStatus=0;
          formData.region=formData.district;
          formData.areaCode=formData.districtCode;
          //时间格式化
          formData.endTime = formData.endTime ? formData.endTime.format('YYYY-MM-DD HH:mm:ss') : null

          console.log(55555)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })


        }
      })
    },
    handleCancel() {
     this.close();
    },
    onChange(value, selectedOptions) {
      console.log(value, selectedOptions)
      this.model.provinceCode = selectedOptions[0].value
      this.model.cityCode = selectedOptions[1].value
      this.model.districtCode = selectedOptions[2].value
      this.model.townCode = selectedOptions[3].value
      this.model.province = selectedOptions[0].label
      this.model.city = selectedOptions[1].label
      this.model.district = selectedOptions[2].label
      this.model.town = selectedOptions[3].label
      this.areaValue = [this.model.provinceCode, this.model.cityCode, this.model.districtCode,this.model.townCode]
    }
  }
}
</script>

<style lang="less" scoped>

</style>
